<template>
  <div class="row">
    <draggable
      class="list-group"
      v-model="list"
      @start="drag = true"
      @end="drag = false"
      @change="log"
    >
      <div
        class="col-3 list-group-box"
        v-for="(item, index) in list"
        :key="index"
        :class="{ active: item.length == 0 }"
      >
        <draggable class="list-group" :list="item" group="people" @change="log">
          <div
            class="list-group-item"
            v-for="(element, index) in item"
            :key="element.name"
          >
            {{ element.name }} {{ index }}
          </div>
        </draggable>
      </div>
    </draggable>
  </div>
</template>
<script>
import draggable from "vuedraggable";

export default {
  name: "two-lists",
  display: "Two Lists",
  order: 1,
  components: {
    draggable,
  },
  data() {
    return {
      list: [
        [
          { name: "John", id: 1 },
          { name: "Joao", id: 2 },
          { name: "Jean", id: 3 },
          { name: "Gerard", id: 4 },
        ],
        [
          { name: "Juan", id: 5 },
          { name: "Edgard", id: 6 },
          { name: "Johnson", id: 7 },
        ],
      ],
      newList: [],
    };
  },
  created() {
    this.handleArr();
  },
  methods: {
    handleArr() {
      const newList = [];
      //在list每一项后面都加一个空数组
      this.list.forEach((item) => {
        if (Array.isArray(item) && item.length > 0) {
          newList.push(item);
          newList.push([]);
        }
      });
      newList.unshift([]);
      this.list = newList;
      console.log("this.list", this.list);
    },
    add: function () {
      this.list.push({ name: "Juan" });
    },
    replace: function () {
      this.list = [{ name: "Edgard" }];
    },
    clone: function (el) {
      return {
        name: el.name + " cloned",
      };
    },
    log: function (evt) {
      this.handleArr();
    },
  },
};
</script>
<style scoped lang="less">
.list-group-box {
  border: 1px solid red;
  margin-bottom: 20px;
  padding: 10px 0;
  &.active {
    border: 1px solid transparent;
  }
}
</style>
